<template>
  <div class="leave">
    <div class="time">
      <span>请假时间:</span>
      <div class="start" @click="datetimeShow = true">{{startTime}}</div>
      <span class="text">至</span>
      <div class="end" @click="enddatetimeShow = true">{{endTime}}</div>
    </div>
    <div class="leave-cause">
      <span>请假事由:</span>
      <textarea placeholder="填写事由" v-model="reason"/>
    </div>
    <div class="footer-btn" @click="applyLeave">提交</div>
    <van-popup
      :show="datetimeShow"
      position="bottom"
    >
      <van-datetime-picker
        type="datetime"
        :value="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="startDate"
        @cancel="datetimeShow = false"
      >
      </van-datetime-picker>
    </van-popup>
    <van-popup
      :show="enddatetimeShow"
      position="bottom"
    >
      <van-datetime-picker
        type="datetime"
        :value="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="endDate"
        @cancel="enddatetimeShow = false"
      >
      </van-datetime-picker>
    </van-popup>
  </div>
</template>

<script>
export default {
  data(){
    return{
      datetimeShow: false,
      enddatetimeShow: false,
      minHour: 0,
      maxHour: 23,
      minDate: new Date().getTime(),
      maxDate: new Date(2049, 10, 1).getTime(),
      currentDate: new Date().getTime(),
      startTime: '',
      endTime: '',
      reason: ''
    }
  },
  onShow(){
    this.startTime= '',
    this.endTime= '',
    this.reason = '';
  },
  methods: {
    startDate(e){
      let time = this.$currency.formatTime(new Date(e.mp.detail));
      this.startTime = time;
      this.datetimeShow = false;
    },
    endDate(e){
      let time = this.$currency.formatTime(new Date(e.mp.detail));
      this.endTime = time;
      this.enddatetimeShow = false;
    },
    //提交请假申请
    async applyLeave(){
      var userToken = wx.getStorageSync('userToken');
      let params = {
        user_token: userToken,
        leave_start_time: this.startTime,
        leave_end_time: this.endTime,
        reason: this.reason
      };
      let res = await this.$api.applyLeave(params);
      if(res.data.level == "success"){
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
        setTimeout(()=>{
          wx.navigateTo({
            url: '/pages/homeMain/home/main'
          })
        },1000)
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .leave{
    min-height: 100vh;
    background-color: #f1f1f1;
    .time{
      background-color: #fff;
      padding: 30rpx;
      border-bottom: 1px #ccc solid;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      .text{
        margin-left: 20rpx;
      }
      div{
        width: 240rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
        border: 1px solid #ccc;
        margin-left: 20rpx;
        font-size: 22rpx;
        color: #333;
      } 
    }
    .leave-cause{
      font-size: 28rpx;
      padding: 30rpx;
      background-color: #fff;
      display: flex;
      textarea{
        width: 520rpx;
        margin-left: 20rpx;
        border: 1px solid #ccc;
        padding: 10rpx;
      }
    }
    .footer-btn{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      background-color: rgb(53, 160, 221);
    }
  }
</style>